<!--我的积分-->
<template>
  <div class="service-container">
    <!-- 搜索栏 -->
    <el-input 
      v-model="searchQuery" 
      placeholder="输入关键词快速查找答案"
      prefix-icon="Search"
      class="search-bar"
      @focus="showFocus = true"
      @blur="showFocus = false"
    >
      <template #append>
        <el-button type="primary">搜索</el-button>
      </template>
    </el-input>

    <!-- 动态提示 -->
    <transition name="fade">
      <div 
        v-if="showFocus && !filteredFAQs.length"
        class="no-results"
      >暂无匹配结果，请尝试其他关键词</div>
    </transition>

    <!-- 服务分类 -->
    <el-tabs v-model="activeTab" class="service-tabs">
      <el-tab-pane label="常见问题" name="faq"></el-tab-pane>
      <el-tab-pane label="订单查询" name="order"></el-tab-pane>
      <el-tab-pane label="售后服务" name="after-sale"></el-tab-pane>
      <el-tab-pane label="联系我们" name="contact"></el-tab-pane>
    </el-tabs>

    <!-- 内容区域 -->
    <div class="content-area">
      <!-- 常见问题 -->
      <div v-if="activeTab === 'faq'">
        <el-collapse v-model="activeQuestions">
          <el-collapse-item 
            v-for="(item, index) in filteredFAQs" 
            :key="index" 
            :title="item.title"
            :name="index"
          >
            <div v-html="item.content"></div>
          </el-collapse-item>
        </el-collapse>
      </div>

      <!-- 订单查询 -->
      <div v-else-if="activeTab === 'order'">
        <el-table :data="orders" style="width: 100%">
          <el-table-column prop="orderNo" label="订单编号" width="180"></el-table-column>
          <el-table-column prop="status" label="状态" width="120"></el-table-column>
          <el-table-column prop="amount" label="金额" width="120"></el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button size="small" @click="viewOrder(row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 售后服务 -->
      <div v-else-if="activeTab === 'after-sale'">
        <el-form 
          :model="afterSaleForm" 
          :rules="rules" 
          ref="afterSaleRef"
          label-width="120px"
        >
          <!-- 售后类型 -->
          <el-form-item label="申请类型" prop="type">
            <el-select v-model="afterSaleForm.type">
              <el-option label="退货" value="return"></el-option>
              <el-option label="换货" value="exchange"></el-option>
              <el-option label="维修" value="repair"></el-option>
              <el-option label="补发配件" value="accessory"></el-option>
              <el-option label="商品破损" value="damage"></el-option>
            </el-select>
          </el-form-item>

          <!-- 订单信息 -->
          <el-form-item label="订单编号" prop="orderNo">
            <el-input v-model="afterSaleForm.orderNo" placeholder="请输入订单编号"></el-input>
          </el-form-item>

          <!-- 商品信息 -->
          <el-form-item label="商品名称" prop="productName">
            <el-input v-model="afterSaleForm.productName" disabled></el-input>
          </el-form-item>

          <!-- 原因说明 -->
          <el-form-item label="原因说明" prop="reason">
            <el-input 
              type="textarea" 
              v-model="afterSaleForm.reason" 
              placeholder="请详细描述问题（至少20字）"
            ></el-input>
          </el-form-item>

          <!-- 上传凭证 -->
          <el-form-item label="上传凭证" prop="files">
            <el-upload
              action="/api/upload"
              list-type="picture-card"
              :limit="3"
              :on-exceed="handleExceed"
              :on-success="handleUploadSuccess"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>

          <!-- 提交按钮 -->
          <el-form-item>
            <el-button type="primary" @click="submitAfterSale">提交申请</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 联系我们 -->
      <div v-else>
        <h3>联系方式</h3>
        <p>在线客服：抖音关注王齐东</p>
        <p>热线电话：400-123-4567（工作日9:00-21:00）</p>
        <p>邮箱：support@example.com</p>
      </div>
    </div>

    <!-- 在线客服 -->
    <el-popover
      placement="left"
      trigger="click"
      popper-class="chat-box"
      :visible="showChat"
      @hide="closeChat"
    >
      <div class="chat-window">
        <h3>在线客服</h3>
        <div class="message-list">
          <div class="message">你好，请问有什么可以帮您？</div>
        </div>
        <div class="input-box">
          <el-input v-model="chatMessage" @keyup.enter="sendChat"></el-input>
          <el-button type="primary" @click="sendChat">发送</el-button>
        </div>
      </div>
      <template #reference>
        <el-button circle class="chat-btn">
          <i class="el-icon-chat-dot-round"></i>
        </el-button>
      </template>
    </el-popover>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';

const searchQuery = ref('');
const activeTab = ref('faq');
const activeQuestions = ref([]);
const showChat = ref(false);
const chatMessage = ref('');

// 示例数据
const faqs = [
  {
    title: '如何取消订单？',
    content: '<p>登录账户后进入我的订单页面...</p>'
  },
  // ... 其他示例数据 ...
];

const orders = [
  {
    orderNo: '202306191234',
    status: '待发货',
    amount: '￥299.00'
  },
  // ... 其他示例数据 ...
];

const afterSaleForm = reactive({
  type: '',
  orderNo: '',
  productName: '自动填充的商品名称',
  reason: '',
  files: []
});

const rules = {
  type: [{ required: true, message: '请选择申请类型', trigger: 'change' }],
  orderNo: [{ required: true, message: '请输入订单编号', trigger: 'blur' }],
  reason: [
    { required: true, message: '请输入原因说明', trigger: 'blur' },
    { min: 20, message: '原因说明至少20字', trigger: 'blur' }
  ],
  files: [{ required: true, message: '请上传相关凭证', trigger: 'change' }]
};

const filteredFAQs = computed(() => {
  return faqs.filter(item =>
    item.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
    item.content.toLowerCase().includes(searchQuery.value.toLowerCase())
  );
});

const handleExceed = () => {
  ElMessage.warning('最多只能上传3张图片');
};

const handleUploadSuccess = (response) => {
  afterSaleForm.files.push(response.url);
};

const submitAfterSale = async () => {
  await afterSaleRef.value.validate();
  console.log('提交数据:', afterSaleForm);
};

const viewOrder = (row) => {
  console.log('查看订单详情:', row);
};

const sendChat = () => {
  if (chatMessage.value.trim()) {
    console.log(`发送消息：${chatMessage.value}`);
    chatMessage.value = '';
  }
};

const closeChat = () => {
  showChat.value = false;
};
</script>

<style scoped>
.service-container {
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.search-bar {
  width: 50%;
  max-width: 600px;
  margin-bottom: 40px;
  border-radius: 32px;
  transition: all 0.3s ease;
}

.search-bar:focus-within {
  box-shadow: 0 0 10px rgba(64, 158, 255, 0.3);
}

.no-results {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  color: #999;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.service-tabs {
  margin-bottom: 40px;
}

.content-area {
  background-color: #f9fafb;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.chat-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #409eff;
  color: #fff;
  font-size: 24px;
  padding: 12px;
  transition: all 0.3s ease;
}

.chat-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(64,158,255,0.5);
}

.chat-box {
  width: 360px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.message-list {
  height: 400px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.message {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
  margin-bottom: 10px;
}

.input-box {
  display: flex;
  gap: 10px;
}

@media (max-width: 768px) {
  .search-bar {
    width: 100%;
  }

  .chat-btn {
    bottom: 10px;
    right: 10px;
  }
}
</style>

<style scoped>
.service-container {
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.search-bar {
  width: 50%;
  max-width: 600px;
  margin-bottom: 40px;
  border-radius: 32px;
}

.service-tabs {
  margin-bottom: 40px;
}

.content-area {
  background-color: #f9fafb;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.chat-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #409eff;
  color: #fff;
  font-size: 24px;
  padding: 12px;
  transition: all 0.3s ease;
}

.chat-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(64,158,255,0.5);
}

.chat-box {
  width: 360px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.message-list {
  height: 400px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.message {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
  margin-bottom: 10px;
}

.input-box {
  display: flex;
  gap: 10px;
}

@media (max-width: 768px) {
  .search-bar {
    width: 100%;
  }

  .chat-btn {
    bottom: 10px;
    right: 10px;
  }
}
</style>